{% extends "index-base.html" %}

{% block sidebar %}
<script src="/static/bootstrap/js/jquery-3.1.1/jquery-3.1.1.js"></script>
<!-- 左侧面板 -->
<ul class="sidebar-menu">
        <li class="header">导航</li>
        <li class="treeview">
          <a href="/">
            <i class="fa fa-dashboard"></i> <span>Dashboard</span>
          </a>
        </li>
        <li class="active treeview">
          <a href="#">
            <i class="fa fa-tasks"></i>
            <span>任务管理</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="/task/tasklist"><i class="fa fa-circle-o text-red"></i> 任务列表</a></li>
            <li><a href="/task/tasklist2"><i class="fa fa-circle-o"></i> 任务列表2</a></li>
            <li><a href="/task/addtask"><i class="fa fa-circle-o"></i> 发布任务</a></li>
            <li><a href="#"><i class="fa fa-circle-o"></i> 申请任务</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-envelope"></i>
            <span>邮件信息</span>
          </a>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-user"></i>
            <span>用户管理</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="#"><i class="fa fa-circle-o"></i> 用户信息</a></li>
            <li><a href="#"><i class="fa fa-circle-o"></i> 修改密码</a></li>
            <li><a href="#"><i class="fa fa-circle-o"></i> 权限申请</a></li>
          </ul>
        </li>
      </ul>
{% endblock %}


{% block content %}
  <div class="content-wrapper">
    <section class="content-header">
      <h1>
        任务管理
      </h1>
      <ol class="breadcrumb">
        <li><a href="/"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">任务管理</li>
        <li class="active">任务列表</li>
      </ol>
    </section>
    <section class="content">
      <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="info-box">
            <span class="info-box-icon bg-aqua"><i class="ion ion-ios-gear-outline"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">CPU Traffic</span>
              <span class="info-box-number">90<small>%</small></span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="info-box">
            <span class="info-box-icon bg-red"><i class="fa fa-google-plus"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">Likes</span>
              <span class="info-box-number">41,410</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->

        <!-- fix for small devices only -->
        <div class="clearfix visible-sm-block"></div>

        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="info-box">
            <span class="info-box-icon bg-green"><i class="ion ion-ios-cart-outline"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">Sales</span>
              <span class="info-box-number">760</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="info-box">
            <span class="info-box-icon bg-yellow"><i class="ion ion-ios-people-outline"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">New Members</span>
              <span class="info-box-number">2,000</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
      </div>

      <div class="row">
        <div class="col-md-12">
          <div class="box box-info">

            <div class="box-header with-border">
              <ul id="myTab" class="nav nav-tabs">
               <li class="active">
                 <a href="#tasklist" data-toggle="tab">任务列表</a>
               </li>
               <li><a href="#taskhistory" data-toggle="tab">历史任务</a></li>
              </ul>

            </div>

            <div id="myTabContent" class="tab-content">
               <div class="tab-pane fade in active" id="tasklist">
                  <div class="box-body">
                    <div class="table-responsive">
                      <table class="table no-margin">
                        <thead>
                        <tr>
                          <th>任务标题</th>
                          <th>创建者</th>
                          <th>状态</th>
                          <th>执行者</th>
                          <th>进展</th>
                          <th>创建日期</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for i in tasklist %}
                        <tr id={{ i[0] }}>
                          <td >{{ i[1] }}</td>
                          <td>{{ i[2] }}</td>
                          {% if i[4] == "0" %}
                            <td>未接受</td>
                          {% elif i[4] == "1"  %}
                            <td>已接受</td>
                          {% elif i[4] == "2"  %}
                            <td>完成</td>
                          {% elif i[4] == "3"  %}
                            <td>待接受</td>
                          {% else %}
                            <td>未知的状态</td>
                          {% endif %}
                          {% if i[5]  == None %}
                            <td></td>
                          {% else %}
                            <td>{{ i[5] }}</td>
                          {% endif %}
                          <td>{{ i[6] }}%</td>
                          <td>{{ i[7] }}</td>
                          <!--<td><a href="pages/examples/invoice.html">{{ i[1] }}</a></td>-->
                          <!--<td><span class="label label-success">Shipped</span></td>-->
                          <!--<td><div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div></td>-->
                        </tr>
                        {% endfor %}
                        </tbody>
                      </table>
                    </div>
                    <div class="box-footer clearfix">
                      <a href="/task/addtask" class="btn btn-sm btn-info  pull-left">创建任务</a>
                    <!--<a href="javascript:void(0)" class="btn btn-sm btn-default btn-flat pull-right">View All Orders</a>-->
                    </div>
                  </div>
               </div>
               <div class="tab-pane fade" id="taskhistory">
                  <div class="box-body">
                    <div class="table-responsive">
                      <table class="table no-margin">
                        <thead>
                        <tr>
                          <th>任务标题</th>
                          <th>创建者</th>
                          <th>状态</th>
                          <th>执行者</th>
                          <th>进展</th>
                          <th>创建日期</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for i in taskhistory %}
                        <tr id="{{ i[0] }}">
                          <td>{{ i[1] }}</td>
                          <td>{{ i[2] }}</td>
                          {% if i[4] == "0" %}
                            <td>未接受</td>
                          {% elif i[4] == "1"  %}
                            <td>已接受</td>
                          {% elif i[4] == "2"  %}
                            <td>完成</td>
                          {% elif i[4] == "3"  %}
                            <td>待接受</td>
                          {% else %}
                            <td>未知的状态</td>
                          {% endif %}
                          {% if i[5]  == None %}
                            <td></td>
                          {% else %}
                            <td>{{ i[5] }}</td>
                          {% endif %}
                          <td>{{ i[6] }} %</td>
                          <td>{{ i[7] }}</td>
                          <!--<td><a href="pages/examples/invoice.html">{{ i[1] }}</a></td>-->
                          <!--<td><span class="label label-success">Shipped</span></td>-->
                          <!--<td><div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div></td>-->
                        </tr>
                        {% endfor %}
                        </tbody>
                      </table>
                    </div>
                    <!-- /.table-responsive -->
                  </div>
               </div>
            </div>

            <script>
              $(document).ready(function(){
                $("tr").click(function(){
                  var tr = $(this);
//                  alert(tr)
                  var task_id = tr.attr("id")
                  var txt=tr.html();
//                  alert(txt);
//                  str = "/task/taskinfo/" + (Math.floor(10 + Math.random() * (99 - 10))) + task_id +(Math.floor(10 + Math.random() * (99 - 10))) ;
                  str = "/task/taskinfo/" + task_id ;
//                  alert(str)
                  location.href = str
                });
              });
            </script>
            <!--<script>-->
               <!--$(function () {-->
                  <!--$('#myTab li:eq(1) a').tab('show');-->
               <!--});-->
            <!--</script>-->

          </div>
        </div>
      </div>
    </section>
  </div>
  <footer class="main-footer">
    <div class="pull-right hidden-xs">
      <b>Version</b> 2.0
    </div>
    <strong>Copyright &copy; 2.17 <a href="#">MeeD</a>.</strong> All rights reserved.
  </footer>
{% endblock %}
